<template>
	<view>
		<view class="header" :style="{ position: headerPosition, top: headerTop }">
			<view class="targetBox">
			<view class="target" v-for="(target, index) in orderbyList" @tap="select(index)" :key="index" :class="[target.selected ? 'on' : '']">
				{{ target.text }}
<!-- 				<view v-if="target.orderbyicon" class="icon" :class="target.orderbyicon[target.orderby]"></view> -->
				<view v-if="target.orderbyicon"  class="sorting">
					<uni-icons type="arrowup" size="12" color="#666" class="iconbtn" :class="target.selected&&target.orderbyicon[target.orderby]=='up'?'on':''"></uni-icons>
					<uni-icons type="arrowdown" size="12" color="#666" class="iconbtn" :class="target.selected&&target.orderbyicon[target.orderby]=='down'?'on':''"></uni-icons>
				</view>
			</view>
			</view>
			<view class="screen"  @click="toggleCateMask('show')">
				筛选
				<image src="../../../static/img/shaixuan.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 占位 -->
		<view class="place"></view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="product-list">
				<view class="product" v-for="goods in goodsList" :key="goods.goods_id" @tap="toGoods(goods)">
					<view class="imgBox">
						<image mode="widthFix" :src="goods.img"></image>
						<view class="tagBox">
							<view class="tags" :class="item.type == 'red' ? 'red' : item.type == 'yellow' ? 'yellow' : 'green'" v-for="(item, index) in goods.tags" :key="index">
								{{ item.title }}
							</view>
						</view>
					</view>
					<view class="name">{{ goods.name }}</view>
					<view class="info">
						<view class="price">{{ goods.price }}</view>
						<view class="slogan">{{ goods.slogan }}</view>
					</view>
				</view>
			</view>
			<view class="loading-text">{{ loadingText }}</view>
		</view>
	<!-- 筛选弹框 -->
	<view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''" @click="toggleCateMask">
		<view class="cate-content" >
			<scroll-view scroll-y class="cate-list" @click.stop="stopClick">
				<view v-for="(item,index) in cateList" :key="item.value">
					<view class="cate-item b-b two">{{item.name}}</view>
					<checkbox-group @change="checkboxChange($event,item,index)">
					    <label class="uni-list-cell uni-list-cell-pd" v-for="(tItem,tindex) in item.child" :key="tItem.value">
					        <view hidden>
					            <checkbox  :value="tItem.value" :checked="tItem.checked" />
					        </view>
					        <view class="cate-item b-b checkItem " :class="tItem.checked?'active':''" >{{tItem.name}}</view>
					    </label>
					</checkbox-group>
				</view>
				
				            
			</scroll-view>
			<view class="footer">
				<view class="btn remake" @click.stop="remakeClick">
					重置
				</view>
				<view class="btn confirm" @click.stop="confirmClick">
					确定
				</view>
			</view>
		</view>
		
	</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goodsList: [
				{
					goods_id: 0,
					img: '/static/img/goods/p1.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '买增', type: 'yellow' }, { title: '限时购', type: 'green' }]
				},
				{
					goods_id: 1,
					img: '/static/img/goods/p2.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '特价', type: 'red' }, { title: '买增', type: 'yellow' }]
				},
				{
					goods_id: 2,
					img: '/static/img/goods/p3.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '特价', type: 'red' }]
				},
				{
					goods_id: 3,
					img: '/static/img/goods/p4.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '特价', type: 'red' }, { title: '限时购', type: 'green' }]
				},
				{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan: '1235人付款' },
				{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan: '1235人付款' },
				{
					goods_id: 6,
					img: '/static/img/goods/p7.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '买增', type: 'yellow' }, { title: '限时购', type: 'green' }]
				},
				{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan: '1235人付款' },
				{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan: '1235人付款' },
				{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan: '1235人付款' }
			],
			loadingText: '正在加载...',
			headerTop: '0px',
			headerPosition: 'fixed',
			cateMaskState: 0,
			orderbyList: [
				{ text: '综合', selected: true, orderbyicon: false, orderby: 0 },
				{ text: '新品', selected: false, orderbyicon: false, orderby: 0 },
				{ text: '价格', selected: false, orderbyicon: ['up', 'down'], orderby: 0 },
				{ text: '信用', selected: false, orderbyicon: false, orderby: 0 }
			],
			orderby: 'sheng',
			config: {}, //已选三级分类id
			cateList: [
					{
						name:'折扣与服务',
						value: 'A',
						child: [
							{
								name:'自营',
								value: '201',
							},
							{
								name:'直降',
							value: '202',
							},
						]
					},
				
					{
						name:'分类',
						value: 'B',
						child: [
							{
								name:'手机通讯',
								value: '301',
							},
							{
								name:'日用百货',
								value: '302',
							},
						]
					},
					{
						name:'品牌',
						value: 'C',
						child: [
							{
								name:'小米',
								value: '401',
							},
							{
								name:'华为',
								value: '402',
							},
							{
								name:'苹果',
								value: '403',
							},
						]
					},
					{
						name:'机身内存',
						value: 'D',
						child: [
							{
								name:'64G',
								value: '501',
							},
							{
								name:'128G',
								value: '502',
							},
							{
								name:'256G',
								value: '503',
							},
						]
					},
				]
			
			};
	},
	onLoad: function(option) {
		//option为object类型，会序列化上个页面传递的参数
		console.log(option.cid); //打印出上个页面传递的参数。
		uni.setNavigationBarTitle({
			title: option.name
		});

		//兼容H5下排序栏位置
		// #ifdef H5
		//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
		let Timer = setInterval(() => {
			let uniHead = document.getElementsByTagName('uni-page-head');
			if (uniHead.length > 0) {
				this.headerTop = uniHead[0].offsetHeight + 'px';
				clearInterval(Timer); //清除定时器
			}
		}, 1);
		// #endif
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
	},
	//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
	onPullDownRefresh() {
		setTimeout(() => {
			this.reload();
			uni.stopPullDownRefresh();
		}, 1000);
	},
	//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
	onReachBottom() {
		uni.showToast({ title: '触发上拉加载' });
		let len = this.goodsList.length;
		if (len >= 40) {
			this.loadingText = '到底了';
			return false;
		} else {
			this.loadingText = '正在加载...';
		}
		let end_goods_id = this.goodsList[len - 1].goods_id;
		for (let i = 1; i <= 10; i++) {
			let goods_id = end_goods_id + i;
			let p = {
				goods_id: goods_id,
				img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
				name: '商品名称商品名称商品名称商品名称商品名称',
				price: '￥168',
				slogan: '1235人付款'
			};
			this.goodsList.push(p);
		}
	},
	methods: {
		reload() {
			console.log('reload');
			let tmpArr = [];
			this.goodsList = [];
			let end_goods_id = 0;
			for (let i = 1; i <= 10; i++) {
				let goods_id = end_goods_id + i;
				let p = {
					goods_id: goods_id,
					img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款'
				};
				this.goodsList.push(p);
			}
		},
		//商品跳转
		toGoods(e) {
			uni.showToast({ title: '商品' + e.goods_id, icon: 'none' });
			uni.navigateTo({
				url: '../goods'
			});
		},
		//排序类型
		select(index) {
			let tmpTis = this.orderbyList[index].text + '排序 ';
			if (this.orderbyList[index].orderbyicon) {
				let type = this.orderbyList[index].orderby == 0 ? '升序' : '降序';
				if (this.orderbyList[index].selected) {
					type = this.orderbyList[index].orderby == 0 ? '降序' : '升序';
					this.orderbyList[index].orderby = this.orderbyList[index].orderby == 0 ? 1 : 0;
				}
				tmpTis += type;
			}
			this.orderbyList[index].selected = true;
			let len = this.orderbyList.length;
			for (let i = 0; i < len; i++) {
				if (i != index) {
					this.orderbyList[i].selected = false;
				}
			}
			uni.showToast({ title: tmpTis, icon: 'none' });
		},
		//显示分类面板
		toggleCateMask(type){
			let timer = type === 'show' ? 10 : 300;
			let	state = type === 'show' ? 1 : 0;
			this.cateMaskState = 2;
			setTimeout(()=>{
				this.cateMaskState = state;
			}, timer)
		},
		stopClick() {},
		//分类点击
		checkboxChange (e,item,index) {
			let key = item.value
			this.config[key]=e.detail.value
			console.log(this.config)
		                var newList = this.cateList[index].child,
		                    values = e.detail.value;
		                for (var i = 0, lenI = newList.length; i < lenI; ++i) {
		                    const res = newList[i]
		                    if(values.includes(res.value)){
		                        this.$set(res,'checked',true)
		                    }else{
		                        this.$set(res,'checked',false)
		                    }
		                }
		            },
		confirmClick() {
			console.log(this.starePrice,this.endPrice)
			this.cateMaskState = 2;
			setTimeout(()=>{
				this.cateMaskState = 0;
			}, 300)
		},
		remakeClick() {
			this.config = ''
			this.cateMaskState = 2;
			setTimeout(()=>{
				this.cateMaskState = 0;
			}, 300)
			// 刷新页面
			uni.redirectTo({
				url:'/pages/goods/goods-list/goods-list'
			})
		}
	}
};
</script>

<style lang="scss">
.icon {
	font-size: 26upx;
	overflow: auto;
}
.header {
	width: 96%;
	padding: 0 2%;
	height: 79upx;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: #fff;
	border-bottom: solid 1upx #eee;
	.targetBox {
		width: 86%;
		display: flex;
		align-items: center;
	.target {
		width: 25%;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		margin-bottom: -2upx;
		&.on {
			color: #d91a36;
			border-bottom: 4upx solid #d91a36;
			font-weight: 600;
			font-size: 30upx;
		}
		.sorting {
			display: flex;
			flex-direction: column;
				font-size: 28upx;
				margin-left: 1%;
			// transform: scale(0.6);
			.iconbtn {
				margin:-8upx 0 ;
			&.on {
				color: #d91a36 !important;
				/* #ifdef MP */
				text {
					color: #d91a36 !important;
				}
				/* #endif */
			}
			}
		}
	}
	}
.screen {
	width: 13%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28upx;
	height: 60upx;
	image {
		width: 28upx;
		height: 40upx;
	}
}
}
.place {
	background-color: #ffffff;
	height: 100upx;
}
.goods-list {
	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}
	.product-list {
		width: 92%;
		padding: 0 4% 3vw 4%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.product {
			width: 48%;
			border-radius: 20upx;
			background-color: #fff;
			margin: 0 0 15upx 0;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
			// image{
			// 	width: 100%;
			// 	border-radius: 20upx 20upx 0 0;
			// }
			.imgBox {
				position: relative;
				image {
					width: 100%;
					border-radius: 20upx 20upx 0 0;
				}
				.tagBox {
					position: absolute;
					left: 2upx;
					bottom: 10upx;
					width: 100%;
					.tags {
						padding: 2upx 10upx;
						font-size: 24upx;
						margin-right: 10upx;
						border-radius: 5upx;
						color: #fff;
						display: inline-block;
						&.red {
							background-color: #d85f61;
						}
						&.yellow {
							background-color: #ffcc4a;
						}
						&.green {
							background-color: #6fd85f;
						}
					}
				}
			}

			.name {
				width: 92%;
				padding: 10upx 4%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 30upx;
			}
			.info {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				width: 92%;
				padding: 10upx 4% 10upx 4%;

				.price {
					color: #e65339;
					font-size: 30upx;
					font-weight: 600;
				}
				.slogan {
					color: #807c87;
					font-size: 24upx;
				}
			}
		}
	}
}
/* 分类 */
	.cate-mask{
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 95;
		transition: .3s;
		
		.cate-content{
			width: 630upx;
			height: 100%;
			background: #fff;
			float:right;
			transform: translateX(100%);
			transition: .3s;
			.footer {
				display: flex;
				justify-content: space-around;
				background-color: #fff;
				margin-top: 20upx;
				.btn {
					width: 40%;
					height: 80upx;
					line-height: 80upx;
					border: 1px solid #666;
					border-radius: 50upx;
					text-align: center;
					&.confirm {
						color: #fff;
						border: 1px solid #d8122e;
						background-color: #d8122e;
					}
				}
			}
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.6);
			
			.cate-content{
				transform: translateX(0);
			}
		}
		
	}
	.cate-list{
		display: flex;
		flex-direction: column;
		height: 90%;
		.cate-item{
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
 			font-size: 28upx;
			color: #555;
			position: relative;
			&.checkItem {
				display: flex;
				width: 150upx;
				text-align: center;
					height: 60upx;
					line-height: 60upx;
					padding-left: 0;
					display: inline-block;
					background-color: #f4f4f4;
					border-radius: 40upx;
					margin: 10upx;
			}
		}
		.two{
			height: 64upx;
			color: #303133;
			font-size: 30upx;
		}
		.active{
			color: #b02920;
			background-color: #f5eded;
			border: 1upx solid #b02920;
		}
	}

</style>
